<?php
$listFaqs = $this->listFaqs;

$larma = array('I', 'II', 'III', 'IV', 'V', 'VI', 'VI', 'VIII', 'IX', 'X', 'XI', 'XII', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX');
?>
<div class="wrapper-content">
    <div class="top-title">
        <div class="content-title">
            <h2><?php echo $this->translate('FAQS') ?></h2>
        </div>
    </div>
    <div class="span12 faqs-page" id="content-right-2">
        <?php if($listFaqs): ?>
    	<div class="content-right-2-content">
    	    <?php foreach($listFaqs as $k => $v): ?>
    		<ul class="faqs-category">
    		    <li class="faqs-category-title"><?php echo '<b style="font-family:Tahoma">'.$larma[$k].'</b>. '.$v['title'] ?>
        		    <?php foreach($v['list_faqs'] as $key => $value): ?>
        		        <ul class="answer-question">
                            <li class="question"><?php echo ($key + 1).'. '; ?><a href="#a"><?php echo $value['question'] ?></a></li>
                            <li class="answer" data-show="false"><?php echo $value['answer'] ?></li>
        		        </ul>
        		    <?php endforeach; ?>
    		    </li>
    		</ul>
    		<?php endforeach; ?>
    	</div>
    	<?php endif; ?>
    </div>

    <div class="span4" id="content-left-2">
        <?php echo $this->partial('/right-render/support.phtml'); ?>
    </div>
</div>
<style>
	.faqs-content {
		color: #1418A8;
	}
</style>

<script>
$(function() {
	$('.question a').click(function() {
		p = $(this).parent().parent();
		a = $(p).find('.answer');
	    if($(a).attr('data-show') == 'false') {
		    $(a).show();
		    $(a).attr('data-show', 'true');
		} else {
			$(a).hide();
		    $(a).attr('data-show', 'false');
		}
	});
});
</script>